<!-- 新增表格数据（新增检测项目） -->
<template>
  <div id="dialog-container">
    <el-dialog v-dialogDrag :fullscreen="isFullScreen" :custom-class="isFullScreen?'fullscreen-default-dialog':'vertical-center-dialog'"
      append-to-body :close-on-click-modal="false" :visible.sync="dialogVisible" @close="$emit('update:show', false)"
      :before-close="handleClose" :show="show" width="800px">
      <div slot="title">
        <span style="color:white;">新增</span>
        <button type="button" aria-label="fullScreen" class="el-dialog__headerbtn" style="margin-right:25px;" @click="isFullScreen = !isFullScreen">
          <i class="el-dialog__close iconfont icon-fuzhicopy22"></i>
        </button>
      </div>
      <el-button type="primary" plain>新增表格数据</el-button><br>
      <el-table :data="tableData">
        <el-table-column prop="num" label="编号" align="center" min-width="60"></el-table-column>
        <el-table-column prop="project" label="检测项目" align="center" min-width="100"></el-table-column>
        <el-table-column prop="location" label="检测位置" align="center" min-width="100"></el-table-column>
        <el-table-column prop="require" label="检测要求" align="center" min-width="150"></el-table-column>
        <el-table-column prop="mesaureData" label="实测数据" align="center">
          <el-table-column prop="data1" label="1" align="center" min-width="100">
            <template slot-scope="scope">
              <el-input v-model="data1"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="data2" label="2" align="center" min-width="100">
            <template slot-scope="scope">
              <el-input v-model="data2"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="data3" label="3" align="center" min-width="100">
            <template slot-scope="scope">
              <el-input v-model="data3"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="data4" label="4" align="center" min-width="100">
            <template slot-scope="scope">
              <el-input v-model="data4"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="data5" label="5" align="center" min-width="100">
            <template slot-scope="scope">
              <el-input v-model="data5"></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="eq" label="检测设备" align="center" min-width="150"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center" min-width="72"></el-table-column>
        <el-table-column prop="operate" label="操作" fixed="right" align="center" min-width="90">
          <template slot-scope="scope">
            <el-button @click="addClick(scope.row)" type="text" size="small">修改</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isFullScreen: false,
        dialogVisible: false,
        data1: '',
        data2: '',
        data3: '',
        data4: '',
        data5: '',
        tableData: [{
          num: '1',
          project: '维氏硬度1',
          location: '齿面',
          require: '75.5-82 HR30N',
          mesaureData: {
            data1: '',
          },
          eq: '',
          remark: '',
          parent: false
        }, ]
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      }
    },
    watch: {
      show() {
        this.dialogVisible = this.show;
      }
    },
    methods: {
      handleClose() { /* 关闭的时候更新状态值 */
        this.isFullScreen = false;
        this.dialogVisible = false;
      }
    }
  }

</script>
